<template>
    <div>
        <van-cell-group>

            <van-field
                    label="新密码"
                    v-model="password"
                    type="password"
                    placeholder="请输入新密码"
            />

            <van-field
                    label="验证码"
                    v-model="code"
                    @click-icon="getCode"
                    placeholder="请输入验证码">

				<span slot="icon"
                      class="verifi_code red"
                      :class="{verifi_code_counting: counting}"
                      @click="getCode">
					<countdown v-if="counting" :time="60000" @end="countdownend">
					  <template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
					</countdown>
					<span v-else>获取验证码</span>
				</span>
            </van-field>
        </van-cell-group>

        <div class="bottom_btn">
            <van-button size="large" type="danger" @click="modifypassword">保存</van-button>
        </div>
    </div>
</template>


<script>
    import {authCaptcha, authReset, authLogout} from '@/api/api';
    import {removeLocalStorage} from '@/utils/local-storage';
    import {Field} from 'vant';

    export default {
        data: () => ({
            password: '',
            mobile: '',
            code: '',
            counting: false
        }),

        methods: {
            modifypassword() {
                if (this.passwordValid()) {
                    authReset({
                        password: this.password,
                        mobile: this.mobile,
                        code: this.code
                    })
                        .then(() => {
                            this.$dialog.alert({message: '保存成功, 请重新登录.'})
                            authLogout();
                        });
                }
            },
            passwordValid() {
                return true;
            },
            getCode() {
                if (this.mobile === '') {
                    this.$toast.fail('请输入号码');
                    return
                }

                if (!this.counting) {
                    authCaptcha({
                        mobile: this.mobile,
                        type: 'change-password'
                    }).then(() => {
                        this.$toast.success('发送成功');
                        this.counting = true;
                    }).catch(error => {
                        this.$toast.fail(error.data.errmsg);
                        this.counting = false;
                    })

                }
            },
        },

        components: {
            [Field.name]: Field
        }
    };
</script>


<style lang="scss" scoped>
    @import '../../../../assets/scss/var';
    @import '../../../../assets/scss/mixin';

    .bottom_btn {
        padding: 30px 15px 0 15px;
    }

    .verifi_code {
        @include one-border;
        padding-left: 10px;

        &::after {
            border-bottom: 0;
            border-left: 1px solid $border-color;
        }

        &_counting {
            color: $font-color-gray;
        }
    }
</style>
